<template>
	<div class="kaoguanguanli">
    <div style="background: #fff; padding:0.3rem 0.3rem; border-radius: 0.1rem; ">
      <div class="flexc" style="background: rgb(234, 234, 234); padding: 0.1rem 0.1rem; border-radius: 0.1rem; font-size: 14px;">
        <div class="flexcc" style="flex: 1; height: 0.8rem; border-radius: 0.05rem; color: #999; " @click="changes(1)" :class="act==1?'act':''">个人成绩</div>
        <div class="flexcc" style="flex: 1; height: 0.8rem; border-radius: 0.05rem; color: #999;"  @click="changes(2)" :class="act==2?'act':''">团体成绩</div>
      </div>
      <!-- <div class="mb20" style="text-align: center; font-size: 16px;">{{saishi.name}}成绩</div> -->

      <div class="flexc" style="font-size: 14px; width: 100%; gap: 0.1rem; padding: 10px 0px; font-weight: bold;" v-if="act == 1">
        <div style="flex: 1; ">名次</div>
        <div style="flex: 2; ">姓名</div>
        <div style="flex: 2; ">组别</div>
        <div style="width: 24px;"></div>
      </div>

     <van-collapse v-model="activeNames"  v-if="act == 1">
        <van-collapse-item :name="item.id" v-for="item in tableData2" :key="item.id">
            <div slot="title" >
               <div class="flexc" style="font-size: 14px; width: 100%; gap: 0.1rem;" >
                 <div style="flex: 1; ">{{item.ranking}}</div>
                 <div style="flex: 2; ">{{item.id_name}}</div>
                 <div style="flex: 2; ">
                   <div v-if="item.match_type == 1">初中生组</div>
                   <div v-if="item.match_type == 2">高中生组</div>
                   <div v-if="item.match_type == 3">高职生组</div>
                   <div v-if="item.match_type == 4">大学生组</div>
                   <div v-if="item.match_type == 5">成人组</div>
                   <div v-if="item.match_type == 6">小学组</div>
                   <div v-if="item.match_type == 7">学生组</div>
                 </div>

               </div>
            </div>
            <div style="line-height: 0.45rem;">
              <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">参赛时间:</div>{{item.entry_time}}</div>
              <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">比赛用时:</div>{{item.play_time}}</div>
              <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">分数:</div>{{item.score}}</div>
              <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">名次:</div>{{item.ranking}}</div>
            </div>
        </van-collapse-item>
      </van-collapse>


      <div class="flexc" style="font-size: 14px; width: 100%; gap: 0.1rem; padding: 10px 0px; font-weight: bold;" v-if="act == 2">
        <div style="flex: 1; ">名次</div>
        <div style="flex: 2; ">团队名</div>
        <div style="flex: 2; ">组别</div>
        <div style="width: 24px;"></div>
      </div>

      <van-collapse v-model="activeNames" v-if="act == 2"  @change="changes2">
        <van-collapse-item :name="item.ranking" v-for="item in tableData" :key="item.id">
            <div slot="title" >
               <div class="flexbc" style="font-size: 12px; gap: 0.1rem;">
                  <div style="flex: 1; color: #f00;">{{item.ranking}}</div>
                  <div style="flex: 2; ">{{item.team_name}}</div>
                  <div style="flex: 2; " >
                    <div v-if="item.match_type == 1">初中生组</div>
                    <div v-if="item.match_type == 2">高中生组</div>
                    <div v-if="item.match_type == 3">高职生组</div>
                    <div v-if="item.match_type == 4">大学生组</div>
                    <div v-if="item.match_type == 5">成人组</div>
                    <div v-if="item.match_type == 6">小学组</div>
                    <div v-if="item.match_type == 7">学生组</div>
                  </div>
                </div>
            </div>
            <div style="line-height: 0.45rem;">
              <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">参赛时间:</div>{{item.entry_time}}</div>
              <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">比赛用时:</div>{{item.play_time}}</div>
              <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">分数:</div>{{item.score}}</div>
              <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">名次:</div>{{item.ranking}}</div>

              <div style="padding: 0.2rem;">
                <div v-for="item2 in item.list" :key="item2.id" style="background: #eaeaea; padding: 0.2rem; margin-bottom: 0.2rem;">
                  <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">姓名:</div>{{item2.id_name}}</div>
                  <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">参赛时间:</div>{{item2.entry_time}}</div>
                  <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">比赛用时:</div>{{item2.play_time}}</div>
                  <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">分数:</div>{{item2.score}}</div>
                  <div class="flex"><div style="width: 1.2rem; text-align: right; margin-right: 0.2rem;">名次:</div>{{item2.ranking}}</div>
                </div>
              </div>
            </div>
        </van-collapse-item>
      </van-collapse>

    </div>
	</div>
</template>

<script>
  import dibu from '../footer.vue'
	export default {
		name: 'kaoguanguanli',
    components:{
      dibu
    },
		data() {
			return {
        act:1,
        activeNames:[],
        activeNames2:[],

        tableData:[],
        tableData2:[],

        search:{
          competition_id:this.$route.query.id,
        },

			}
		},
    beforeDestroy() {

    },
		created() {
      this.getlist3()
		},
		mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;
		},
		methods: {
      changes2:function(item){
        this.$nextTick(()=>{
          let arr = [...new Set(this.activeNames)].filter(item => !this.activeNames2.includes(item.ranking))
          let data = ""
          this.tableData.forEach((item,index)=>{
            if(item.ranking == arr[0]){
              data = item
            }
          })
          if(data){
            this.getlist2(data)
          }
          this.activeNames2 = JSON.parse(JSON.stringify(this.activeNames))
        })
      },
      changes(item) {
        this.act = item

        if(item == 1){
          this.getlist3()
        }else{
          this.getlist()
        }
      },



      getlist:function(){
        axios.get(this.IP_URL+'/api/enrolment/teamrankscore',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            response.data.data.forEach(item=>{
              this.$set(item,'list',[])
            })
            this.tableData = response.data.data

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      getlist2:function(row){
        axios.get(this.IP_URL+'/api/enrolment/playerRankScore',{params:{
          competition_id:row.match_id,
          team_id:row.team_id
        }}).then((response)=>{
        	if (response.data.msg.code == 0) {
            row.list = response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      getlist3:function(){
        axios.get(this.IP_URL+'/api/enrolment/playerRankScore',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.tableData2 = response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
    }
	}
</script>


<style scoped >
  /deep/ .el-input__inner{}
  /deep/ .el-dialog__header{ padding: 0;}
  /deep/ .van-cell{ padding: 10px 0;}
  .act{ background: #fff !important; color: #000 !important;}
</style>
